<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=upXkuuhfOOuQkOlW7yxP0cVHRKIseXmc"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
    <title>车辆信息</title>
</head>
<style>
    span{
        float: right;
        color: black;
    }
    p{
        color:rgba(0,0,0,0.51) ;
    }


</style>
<body>
<div class="cont" style="height: 92vh">
    <div class="top" style="float:left;width: 100%;">
        <p style="font-size: 0.9em;margin-top: 2px;">实时车况/<span id="Sn2" style="float: none;"> </span></p>
        <p  style="font-size: 0.95em;margin-top: 20px;">状态:<span id="zhuangtai"> </span></p>
        <p  style="font-size: 0.95em;">车载电池电量:<span id="chezai"> </span></p>
        <p  style="font-size: 0.95em;">内置电池电量:<span id="neizhi"> </span></p>
        <p style="font-size: 0.95em;">基站信号:<span id="jizhan"> </span></p>
        <p  style="font-size: 0.95em;">卫星信号:<span  id="weixing"> </span></p>
        <p  style="font-size: 0.95em;height: 35px;">经纬度:<span style="font-size: 0.9em" id="jingwei"> </span></p>
        <p  style="font-size: 0.95em;height: 40px;">位置:<span id="weizhi"> </span></p>
        <p  style="font-size: 0.95em;">上报时间:<span id="shangbao"> </span></p>

    </div>
    <div><HR style="width: 99%;color: #ccc"  SIZE=1></div>
    <div class="mid1" style="float:left;width: 100%;">
        <p style="font-size: 0.9em;margin-top: -4px;">设备信息</p>
        <p  style="font-size: 0.95em;">SN号:<span id="Sn"> </span></p>
        <p  style="font-size: 0.95em;">服务到期日:<span id="daoqi"> </span></p>
    </div>
    <div><HR style="width: 99%;color: #ccc"  SIZE=1></div>
    <div class="mid2" style="float:left;width: 100%;">
        <p style="font-size: 0.9em;margin-top: -4px;">车辆信息</p>
        <p  style="font-size: 0.95em;">购车日期:<span id="riqi1"> </span></p>
        <p style="font-size: 0.95em;">车辆品牌:<span id="pinpai"> </span></p>
        <p  style="font-size: 0.95em;">车辆型号:<span id="xinghao"> </span></p>
        <p  style="font-size: 0.95em;">车架号:<span id="chejia"> </span></p>
        <p  style="font-size: 0.95em;">购车金额:<span id="jinee"> </span></p>
        <p style="font-size: 0.95em;height: 40px;">购车发票:<img  id="invoice" src="#" style="float: right;width: 60px;height: 40px;"></img></p>
        <p  style="font-size: 0.95em;">所在省市:<span id="shengshi"> </span></p>
        <p  style="font-size: 0.95em;height: 40px;">车辆图片:
            <img  id="carpic2" src="#" style="float: right;width: 60px;height: 40px;"></img>
            <img  id="carpic1" src="#" style="float: right;width: 60px;height: 40px;margin-right: 10px;"></img></p>



    </div>
    <div><HR style="width: 99%;color: #ccc"  SIZE=1></div>
    <div class="bottom" style="height: 15%;float:left;width: 100%;">
        <p style="font-size: 0.9em;margin-top: -4px;">用户信息</p>
        <p style="font-size: 0.95em;">姓名:<span id="xingming"> </span></p>
        <p  style="font-size: 0.95em;">身份证号码:<span id="shenfen"> </span></p>
        <p  style="font-size: 0.95em;padding-bottom: 40px;">手机号码:<span id="shouji"> </span></p>

    </div>

</div>
</body>
<script type="text/javascript">
    window.onload = function() {
        document.getElementById("zhuangtai").innerHTML = sessionStorage.zhuangtai;
        document.getElementById("chezai").innerHTML = sessionStorage.chezai;
        document.getElementById("neizhi").innerHTML = sessionStorage.neizhi;
        document.getElementById("jizhan").innerHTML = sessionStorage.jizhan;
        document.getElementById("weixing").innerHTML = sessionStorage.weixing;
        document.getElementById("jingwei").innerHTML = sessionStorage.jingdu+",</br>"+sessionStorage.weidu;
        document.getElementById("shangbao").innerHTML = sessionStorage.shangbao;
        var geoc = new BMap.Geocoder();
            var lng = sessionStorage.jingdu;
            var lat = sessionStorage.weidu;

            var point = new BMap.Point(lng, lat);

            geoc.getLocation(point, function (rs) {
                var addComp = rs.addressComponents;
                document.getElementById("weizhi").innerHTML = addComp.province + addComp.city + addComp.district + addComp.street+ addComp.streetNumber;
            });
        document.getElementById("Sn").innerHTML = sessionStorage.Sn;
        document.getElementById("Sn2").innerHTML = sessionStorage.Sn;
        document.getElementById("daoqi").innerHTML = sessionStorage.daoqi;

        document.getElementById("riqi1").innerHTML = sessionStorage.riqi1;
        document.getElementById("pinpai").innerHTML = sessionStorage.pinpai;
        document.getElementById("xinghao").innerHTML = sessionStorage.xinghao;
        document.getElementById("chejia").innerHTML = sessionStorage.chejia;
        document.getElementById("jinee").innerHTML = sessionStorage.jinee;
        document.getElementById("invoice").src=sessionStorage.invoice;
        document.getElementById("shengshi").innerHTML = sessionStorage.shengshi;
        document.getElementById("carpic2").src=sessionStorage.carpic2;
        document.getElementById("carpic1").src=sessionStorage.carpic1;
        console.log(document.getElementById("carpic1").src);

        document.getElementById("xingming").innerHTML = sessionStorage.xingming;
        document.getElementById("shenfen").innerHTML = sessionStorage.shenfen;
        document.getElementById("shouji").innerHTML = sessionStorage.shouji;

    };


</script>
</html>